<template>
    <div class="edit">
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
        <!-- <h1>个人资料</h1>
        <h3>{{ changeNum(num) }}</h3>
        <h3>{{ changeNum(num1) }}</h3>
        <h3>{{ changeNum(numList.n) }}</h3> -->
        <div class="modifyMain">
            <van-cell-group>
                <!-- 输入任意文本 -->
                <van-field :readonly="btnFlat" v-model="text" label="昵称" />
                <van-field disabled v-model="email" type="text" label="账号" />
                <van-field :readonly="btnFlat" v-model="phone" type="tel" label="电话" />
                <van-field :readonly="btnFlat" v-model="signature" type="text" label="签名" />
                <van-field :readonly="btnFlat" v-model="password" type="password" label="密码" />
            </van-cell-group>
        </div>
        <div class="modifyBtn">
            <van-button @click="changeFlat" type="primary" round size="large">{{ dd }}</van-button>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, onBeforeMount, onMounted } from "vue";
import { Field, CellGroup, NavBar } from "vant";
import { useStore } from "vuex";
import { Button } from "vant";
import { modify_msg } from "@/request/index";
const onClickLeft = () => history.back();

let email = ref("");
let text = ref("");
let signature = ref("");
let password = ref("");
let phone = ref("");
const store = useStore();
let btnFlat = ref(true);
let dd = computed(() => {
    if (btnFlat.value) {
        return "修改信息";
    } else {
        return "保存信息";
    }
});
let user_id = localStorage.getItem("token");
const changeFlat = () => {
    btnFlat.value = !btnFlat.value;
    // textDom.value.disabled = false;
    if (btnFlat.value) {
        // console.log(user_id, password.value, signature.value, phone.value, text.value);
        modify_msg({ user_id, user_pwd: password.value, user_signature: signature.value, user_phone: phone.value, user_nick_name: text.value }).then((data) => {
            // console.log(data);
        });
    }
};
// let { user_id,user_pwd ,user_signature,user_phone,user_nick_name} = req.body;

onMounted(() => {
    // console.log(store.state.myRoute.loginObj);
    text.value = store.state.myRoute.loginObj.user_nick_name;
    email.value = store.state.myRoute.loginObj.user_acc;
    signature.value = store.state.myRoute.loginObj.user_signature || "天青色等烟雨";
    phone.value = store.state.myRoute.loginObj.user_phone || "未填写";
    password.value = store.state.myRoute.loginObj.user_pwd;
});
// let num = ref(78978);
// let num1 = ref(8978);
// let numList = ref({ n: 4444 });
// const changeNum = (x) => {
//     x = x + "";
//     console.log(x.length);
//     if (x.length >= 5) {
//         x = (Number(x) / 1000).toFixed(2) + "w";
//     } else if (x.length == 4) {
//         x = (Number(x) / 1000).toFixed(1) + "w";
//     }
//     return x;
// };
</script>
<style lang="scss">
.modifyMain {
    padding: 0 10px;
}
.modifyBtn {
    margin: 10px auto 0;
    width: 8.8rem;
    .van-button--primary {
        background-color: #576574;
        border-color: #576574;
    }
}
</style>
